<!DOCTYPE html>
<html>

<head>
    <title>todolist</title>
    <script type="text/javascript" src="../../vue.js"></script>
</head>

<body>
    <!-- 
		使用组件改造todolist
	 -->
    <div id='app'>
        <input type="text" v-model="inputValue">
        <input type="submit" value="提交" v-on:click="tijiao">

        <!-- 将 li 标签抽离出一个组件来写 -->
        <ul>
            <!-- <li v-for="item in list"></li> -->

            <!-- 
				1.这个todo-list相当于一个子组件
				2.v-bind:content="item" : 它的意思是父组件向子组件传值
			-->
            <todo-list v-bind:content="item" v-for="item in list"></todo-list>
        </ul>
    </div>

    <script type="text/javascript">
        //方法一:注册一个全局的组件 第一个参数:组件的名字
        // Vue.component("TodoList",{
        // 	props : ['content'],  父组件传值,子组件一定要接收
        // 	template : '<li>{{content}}</li>'     //组件的html代码
        // })

        //方法二:使用局部组件
        var abc = {
            props: ['content'],
            template: '<li>{{content}}</li>'
        }

        var obj = new Vue({
            el: '#app',
            components: {
                TodoList: abc
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                tijiao: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        });
    </script>
</body>

</html>